//3.3 /lib/code2/main_data35.dart
//bottomNavigationBar配制底部导航栏菜单
import 'dart:async';

import 'package:badges/badges.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_base_kit/home/video/home_video_main_page.dart';
import 'package:get/get.dart';

import '../controller/home_controller.dart';
import '../utils/log_util.dart';
import 'home_item_page.dart';

///代码清单12-7 主页面的根布局
///lib/home/home_main_page.dart
class HomeMainPage extends StatelessWidget {
  HomeMainPage({Key? key}) : super(key: key);

  late HomeController controller;

  @override
  Widget build(BuildContext context) {
    //依赖注入
    controller = Get.put(HomeController());

    return Scaffold(
      //页面的主内容区
      body: PageView(
        //设置PageView不可滑动切换
        physics: NeverScrollableScrollPhysics(),
        //PageView的控制器
        controller: controller.pageController,
        //PageView中的三个子页面
        children: <Widget>[
          //第一个页面
          HomeVideoPage(),
          //第二个页面
          HomeItemMainPage(),
          HomeItemMainPage(),
          //个人中心
          HomeItemMainPage(),
        ],
      ),
      //底部导航栏
      bottomNavigationBar: GetBuilder(
        builder: (HomeController controller) {
          return buildTipsBottomAppBar();
        },
      ),
    );
  }

  ///代码清单12-7-1 底部导航栏
  BottomAppBar buildTipsBottomAppBar() {
    return BottomAppBar(
      child: Row(
        children: <Widget>[
          bottomAppBarItem(0, 99),
          bottomAppBarItem(1),
          bottomAppBarItem(2),
          bottomAppBarItem(3),
        ],
        mainAxisAlignment: MainAxisAlignment.spaceAround,
      ),
    );
  }

  Expanded bottomAppBarItem(int index, [int tips = 0]) {
    List<IconData> normalImgUrls = controller.normalImgUrls;
    List<IconData> selectedImgUrls = controller.selectedImgUrls;
    int currentIndex = controller.currentIndex;
    List<String> titles = controller.titles;
    //设置默认未选中的状态
    TextStyle style = TextStyle(fontSize: 12, color: Colors.grey);
    //这里使用的是图标 读者可使用自己的小图片 用Image来加载
    IconData iconData = normalImgUrls[index];
    Color iconColor = Colors.grey;
    if (currentIndex == index) {
      //选中的话
      style = TextStyle(fontSize: 13, color: Colors.blue);
      iconData = selectedImgUrls[index];
      iconColor = Colors.blue;
    }
    //构造返回的Widget
    Widget item = SizedBox(
      height: 64,
      child: GestureDetector(
        behavior: HitTestBehavior.opaque,
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            Badge(
              //位置微调
              position: BadgePosition.topEnd(end: -1,top: -2),
              badgeContent: Text(
                "$tips",
                style: const TextStyle(color: Colors.white, fontSize: 8),
              ),
              padding: const EdgeInsets.all(2),
              showBadge: tips == 0 ? false : true, //是否显示小红点
              badgeColor: Colors.red, //小红点背景色
              child: Icon(iconData, size: 25, color: iconColor),
            ),
            Text(
              titles[index],
              style: style,
            )
          ],
        ),
        onTap: () {
          controller.onBottomTap(index);
        },
      ),
    );
    return Expanded(child: item);
  }

  Widget buildRedTips(int tips) {
    if (tips == 0) {
      return const SizedBox();
    }
    String tipsStr = tips.toString();
    if (tips >= 100) {
      tipsStr = "...";
    }
    return Align(
      alignment: const Alignment(0.3, -0.7),
      child: Row(
        mainAxisSize: MainAxisSize.min,
        children: [
          Container(
            alignment: Alignment.center,
            padding:
                const EdgeInsets.only(left: 2, right: 2, top: 1, bottom: 1),
            height: 12,
            decoration: const BoxDecoration(
                color: Colors.red,
                borderRadius: BorderRadius.all(Radius.circular(10))),
            child: Text(
              tipsStr,
              style: const TextStyle(fontSize: 6, color: Colors.white),
            ),
          )
        ],
      ),
    );
  }
}
